<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .active {
            background-color: blue;
        }

        #left {
            float: left;
            width: 200px;
            height: auto;
            background-color: paleturquoise;
        }

        #left>div {
            width: 195px;
            height: 45px;
            border: solid 3px pink;
            text-align: center;
            font-weight: 600;
            font-size: 20px;
            line-height: 36px;
            color: purple;
        }

        #right {
            width: auto;
            height: 500px;
            background-color: rosybrown;
            margin-left: 200px;
            padding: 5px;

        }

        #right>div {
            display: none;
        }

        #right>div.show {
            display: block;
        }

        table {
            width: 500px;
            text-align: center;
        }

        #ts {
            width: 200px;
            height: 200px;
            background-color: palegreen;
            color: palevioletred;
            display: none;
            text-align: center;
            font-size: 22px;
            line-height: 200px;
            position: absolute;
            top: 200px;
            left: 700px;
        }
    </style>
</head>

<body>
    <div id="ts">提交成功</div>
    <div id="box">
        <div id="left">
            <div>第一部分</div>
            <div>第二部分</div>
            <div>第三部分</div>
            <div>第四部分</div>
        </div>
        <div id="right">
            <div class="show">
                <label>
                    用户: <input type="text" id="user">
                </label>
                <button id="add"> 添加</button>
            </div>
            <div>
                <h1>展示页面</h1>
                <table>
                    <thead>
                        <th>姓名</th>
                        <th>操作</th>
                    </thead>
                    <tbody id="tbody">
                        <tr>
                            <td>姓名</td>
                            <td>
                                <button>上移</button>
                                <button>删除</button>
                                <button>下移</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div>333</div>
            <div>4444</div>
        </div>
    </div>

    <script>
        var leftdivs = document.querySelectorAll("#left>div");
        var rightdivs = document.querySelectorAll("#right>div");
        var user = document.getElementById("user");
        var add = document.getElementById("add");
        var tbody = document.getElementById("tbody");
        var ts = document.getElementById("ts")
        var arr = [];
        var leftdivsArr = [].slice.call(leftdivs);
        for (var i = 0; i < leftdivs.length; i++) {
            leftdivs[i].onclick = function () {
                var n = leftdivsArr.indexOf(this);
                // console.log(n)
                rightdivsHide(leftdivs, rightdivs);
                rightdivs[n].classList.add("show");
                this.classList.add("active");
                if (n == 1) {
                    show(arr);
                }
            }
        }

        function rightdivsHide(leftdivs, rightdivs) {
            for (var i = 0; i < rightdivs.length; i++) {
                rightdivs[i].classList.remove("show");
                leftdivs[i].classList.remove("active")

            }

        }
        add.onclick = function () {
            var userVal = user.value;
            if (userVal) {
                var obj = {
                    user: userVal,
                    id: +new Date()
                }
                arr.push(obj);
                ts.style.display = "block"
                var timer = setInterval(function () {
                    ts.style.display = "none"
                }, 3000);

                localStorage.arr = JSON.stringify(arr);
            } else {
                alert("不能为空");
            }
        }

        function show(arr) {
            var str = "";
            for (var i = 0; i < arr.length; i++) {
                str += `
                <tr>
                    <td>${arr[i].user}</td>
                    <td>
                        <button onclick="up(${arr[i].id})" ${i==0?"disabled":""}>上移</button>
                        <button onclick="del(${arr[i].id})">删除</button>
                        <button onclick="down(${arr[i].id})"${i==arr.length-1?"disabled":""}>下移</button>
                    </td>
                </tr>
                
                 `;
            }
            tbody.innerHTML = str;

        }

        function del(id) {
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    arr.splice(i, 1);
                    break
                }
            }
            localStorage.arr = JSON.stringify(arr);
            show(arr);
        }

        var up = function (n) {
            for (var i = 0; i < arr.length; i++) {
                if (n == arr[i].id) {
                    [arr[i], arr[i - 1]] = [arr[i - 1], arr[i]]
                    break;
                }
            }
            localStorage.arr = JSON.stringify(arr);
            show(arr);
        }

        var down = function (m) {
            for (var i = 0; i < arr.length; i++) {
                if (m == arr[i].id) {
                    [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]]
                    break;
                }
            }
            localStorage.arr = JSON.stringify(arr);
            show(arr);
        }
    </script>
</body>

</html>